<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="宝宝日记" left-arrow @click-left="$router.go(-1)">
        <template #right>
          <img src="/img/icons1/icon_search.png" alt="" @click.stop="fn1">
          <img src="/img/icons1/icon_add.png" alt="" @click.stop="$router.push('/addnote')">
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="text">
        <p>已陪伴宝宝<span>365</span>天</p>
        <!-- 主内容区 -->
        <div class="section" @click="$router.push('/notedetail')">
          <div class="section-top">
            <p>
              <img src="/img/home/icons_circle.png" alt="">
            <span>今天</span>
            </p>
            <p>
              第<span>365</span>天
            </p>
          </div>
          <div class="section-bot">
            <div class="data">
              内容区
            </div>
          </div>
        </div>
        <!-- 主内容区2 -->
        <div class="section">
          <div class="section-top">
            <p>
              <img src="/img/home/icons_circle.png" alt="">
            <span>今天</span>
            </p>
            <p>
              第<span>365</span>天
            </p>
          </div>
          <div class="section-bot">
            <div class="data">
              内容区
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast } from 'vant'

Vue.use(NavBar)
export default {
  methods: {
    fn1 () {
      Toast('sou')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  .header {
    @include rect(100%,.44rem);
    .van-nav-bar {// navbar样式
      background-color: #FCCE00;
      @include rect(100%,.44rem);
      /deep/.van-nav-bar__left {// 左按钮
        .van-icon {
          color: white;
          font-size: .17rem;
        }
      }
      /deep/.van-nav-bar__title{// title
        height: .44rem;
        color: #FFFFFF;
        font-size: .19rem;
        font-family:PingFang SC;
        font-weight:bold;
      }
      /deep/.van-nav-bar__right { // 右按钮
        cursor: default;
        img {
          width: .17rem;
          height: .17rem;
          margin-left: .205rem;
          cursor: pointer;
        }
      }
    }
  }
  .content {
    .text {
      p {
        font-size: .14rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height: .14rem;
        margin-top: .245rem;
        margin-left: .23rem;
        span {
        color: #33DCDE;
        font-weight:bold;
        font-size: .18rem;
        }
      }
      // section样式
      .section {
        .section-top {
          @include flexbox();
          @include justify-content(space-between);
          @include padding(0 .22rem 0 0);
          line-height: .2rem;
          text-align: center;
          img {
            width:.15rem;
            height: .15rem;
          }
          p:nth-child(1){
            @include flexbox();
            @include align-items();
            height: .2rem;
            span {
              font-size: .16rem;
              font-weight: bold;
              @include margin(0 0 0 .09rem);
            }
          }
          p:nth-child(2){
            font-size: .13rem;
            font-weight: bold;
            span {
              font-size: .19rem;
              color:#33DCDE;
            }
          }
        }
        .section-bot {
          @include rect(100%,auto);
          @include margin(.1rem 0 .1rem .27rem);
          // @include margin(0 0 0 .27rem);
          @include padding(0.1rem .22rem 0.23rem .16rem);
          border-left: .015rem solid #FCCE00;
          .data {
            @include padding(.1rem);
            //有内容时需要把高度取消
            @include rect(3rem,100px);
            box-shadow:0px 0px 15px 0px rgba(85,85,85,0.15);
            border-radius:12px;
          }
        }
      }
    }
  }
}
</style>
